<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/style_user.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <!--用户若绑定手机号则为修改-->
    <title>{neq name="bind" value=''}修改{/neq}绑定手机号码</title>
</head>
{include file="public/href" /}
<body>
<form  action="{:url('mobile/shop_set/bind_act')}" method="post" id="form" >
<div class="wrap-pass">
    <div class="header">
        <p>{neq name="bind" value=''}修改{/neq}绑定手机号码</p>
        <img src="__STATIC__/img_user/back.png" class="back" onclick=window.location.href="{:url('mobile/user_info/user_account_safety')}">
    </div>
    <div class="center">
        <!--旧绑定手机号码-->
        {neq name="bind" value=''}
        <div class="title">
            <ul>
                <li class="cir"></li>
                <li>验证身份</li>
                <li class="cir"></li>
            </ul>
        </div>
        <div>
            <input style="float: none" class="text" type="number" value="{$bind}" readonly placeholder="请输入已绑定手机号" name="username" nullmsg="请输入已绑定手机号" datatype="m" errormsg="已绑定手机号格式不正确">
        </div>
        <div class="yanzheng">
            <input style="float: none" class="text" type="number" name="yzm_1" nullmsg="请输入验证码" datatype="n6" errormsg="请输入6位纯数字验证码" placeholder="验证码">
            <span><a href="javascript:check_num(1);" id="yzm_1">获取验证码</a></span>
        </div>
        {/neq}
        <!--新绑定手机号码-->
        <div class="title">
            <ul>
                <li class="cir"></li>
                <li>设置{neq name="bind" value=''}新的{/neq}绑定手机号码</li>
                <li class="cir"></li>
            </ul>
        </div>
        <div>
            <input style="float: none" class="text" type="number" placeholder="请输入绑定手机号码" name="new_phone" nullmsg="请输入绑定手机号" datatype="m" errormsg="绑定手机号格式不正确">
        </div>
        <div class="yanzheng">
            <input style="float: none" class="text" type="number" name="yzm_2"  nullmsg="请输入验证码" datatype="n6" errormsg="请输入6位纯数字验证码" placeholder="验证码">
            <span><a href="javascript:check_num(2);" id="yzm_2">获取验证码</a></span>
        </div>
        <!--未绑定过手机号需设置登录密码-->
        {eq name="bind" value=""}
        <div class="title">
            <ul>
                <li class="cir"></li>
                <li>设置绑定手机号的登录密码</li>
                <li class="cir"></li>
            </ul>
        </div>
        <div class="text">
            <input type="password" placeholder="密码 (6到18位)" id="pwd2" datatype="s6-18" name="password" nullmsg="密码不能为空" errormsg="请输入6到18位" >
            <img src="__STATIC__/img_user/dl-mimab.png" style="margin-top: 12px;" id="p_2" onclick="toggle(2)">
        </div>
        {/eq}
        <!--未绑定过手机号需设置登录密码-->
    </div>
    <input type="submit" class="submit" id="yes" value="确定">
</div>
</form>
{include file="public/src"  /}
<script>
    $(function () {
        $.Tipmsg.r = null;
        $.Tipmsg.p = null;
        $.Datatype.n6 = /^\d{6}$/;
        var demo = $("#form").Validform({
            tiptype: function (msg) {
                layer.open({content: msg, skin: 'msg', time:2});
            },
            btnSubmit:'#yes',
            tipSweep: true,
            ajaxPost:true,
            callback:function (t) {
                if (t.code != 200){
                    layer.open({content:t.message,skin:'msg',time:2});
                }else{
                    layer.open({content:t.message,skin:'msg'});
                    setTimeout(function () {
                        window.location.href = "{:url('mobile/user_info/user_account_safety')}"
                    },1000)
                }
            }

        });
        demo.config({
            ajaxpost:{
                error: function () {
                    layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                }
            }
        })
    });
    //发送验证码
    function check_num(id){
        var tel = '';
        if (id == 1){
            tel = $("[name='username']").val();
        }else{
            tel = $("[name='new_phone']").val();
            if (tel == ''){
                layer.open({content: '请输入新的绑定手机号码', skin: 'msg', time:2});
                return false;
            }
            if (!(/^1(3|4|5|7|8)\d{9}$/.test(tel))){
                layer.open({content: '新绑定手机号码格式不正确', skin: 'msg', time:2});
                return false;
            }
            if (!check_unique(tel)){
                return false;
            }
        }
        count_down(id);
        $.ajax({
            url:"{:url('mobile/shop_set/get_code')}",
            dataType:'json',
            type:'post',
            data:{'tel':tel,'act':id},
            success:function(t){
                layer.open({content: '验证码发送成功',skin:'msg',time:2});
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        })
    }
    //验证码倒计时
    function count_down(id){
        var num = 60;
        var verif = $('#yzm_'+id);
        var timer = setInterval(function(){
            verif.text(num+'秒');
            if (num <= 60 && num >= 1){
                $("[name='yzm_"+id+"']").css('width','75%');
                verif.removeAttr('href');
            }else{
                $("[name='yzm_"+id+"']").css('width','65%');
                verif.text('重新获取验证码');
                window.clearInterval(timer);
                verif.attr("href",'javascript:check_num('+id+');');
            }
            num--;
        },1000);
    }
    //检测新绑定的手机号码的唯一性
    function check_unique(tel){
        var flag = true;
        $.ajax({
            url:"{:url('mobile/shop_set/bind_phone')}",
            type:'post',
            async:false,
            dateType:'json',
            data:{'tel':tel},
            success:function(t){
                console.log(t.code)
                if (t.code != 200){
                    layer.open({content: t.message,skin: 'msg',time:2});
                    flag = false;
                }
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        });
        return flag;
    }
    //切换密码的可视类型
    function toggle(id){
        var type = $('#pwd'+id);
        if (type.prop('type') == 'text'){
            type.prop('type','password');
            $('#p_'+id).prop('src','__STATIC__/img_user/dl-mimab.png');
        }else {
            type.prop('type','text');
            $('#p_'+id).prop('src','__STATIC__/img_user/dl-mima.png');
        }
    }
</script>
</body>
</html>